<template>
	<view class="weather-container">
		<button @click="getWeather">获取明天天气预报</button>
		<view class="weather-info">
			<view>{{day}}</view>
			<view>{{week}}</view>
			<view>{{city}}</view>
			<view>{{highWendu}}</view>
			<view>{{lowWendu}}</view>
		</view>
		<view v-if="errorMsg" class="error" style="color:red;margin-top:20rpx;">{{ errorMsg }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				day: '',
				week: '',
				city: '',
				highWendu: '',
				lowWendu: '',
				errorMsg: ''
			}
		},
		methods: {
			getWeather() {
				this.errorMsg = '';
				uni.request({
					url: 'http://t.weather.sojson.com/api/weather/city/101230501',
					method: 'GET',
					header: {
						// 'Authorization': uni.getStorageSync('token'), // 携带登录凭证
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// 接口必填参数
					// data: {},

					success: (res) => {
						console.log('查询结果', res.data.message);

						// 处理接口响应
						this.city = res.data.cityInfo.city
						this.highWendu = res.data.data.forecast[1].high
						this.lowWendu = res.data.data.forecast[1].low
						this.day = res.data.data.forecast[1].ymd
						this.week = res.data.data.forecast[1].week
					},
					fail: (err) => {
						console.log('6666666');
					},

				})
			}
		}
	}
</script>

<style scoped>
	.weather-container {
		padding: 20rpx;
	}

	.weather-info {
		margin-top: 20rpx;
		line-height: 1.8;
	}
</style>